import React, { Component } from 'react'
import ItemList from './ItemList'
import ShopCar from './ShopCar'
import styles from "../assets/styles/tabe.module.css"

export default class TabE extends Component {
  state = {
    lists: [
      {
        id: 1,
        name: "python入门到精通",
        title: "人邮出版社",
        imgSrc: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F41e69264-a54c-47a3-8a64-1d259840f3dc%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1704859888&t=1d4251d9107dd56935e25c458bbfb63f",
        price: 67
      },
      {
        id: 2,
        name: "JavaScript入门到住院",
        title: "人邮出版社",
        imgSrc: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F41e69264-a54c-47a3-8a64-1d259840f3dc%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1704859888&t=1d4251d9107dd56935e25c458bbfb63f",
        price: 67
      },
      {
        id: 3,
        name: "Java核心编程",
        title: "人邮出版社",
        imgSrc: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F41e69264-a54c-47a3-8a64-1d259840f3dc%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1704859888&t=1d4251d9107dd56935e25c458bbfb63f",
        price: 67
      },
      {
        id: 4,
        name: "鸿蒙白皮书",
        title: "人邮出版社",
        imgSrc: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F41e69264-a54c-47a3-8a64-1d259840f3dc%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1704859888&t=1d4251d9107dd56935e25c458bbfb63f",
        price: 67
      }

    ],
    array:[]
  }
  /**
   * 加入购物车
   * @param {} id 
   */
  addShopCar = (id)=>{
    const {lists,array} = this.state
    const product = lists.find(item=>item.id == id)
    product.num = 1
    product.checked = false
    //判断当前这个商品是否已经存在购物车
    if(array.includes(product)){
      alert("商品已经存在，请勿重复添加")
    }else{ 
      array.push(product)
    }
    this.setState({
      array
    })
  }
  /**
   * 删除购物车
   * @param {*} id 
   */
  deleteShopCar = (id)=>{
    const {array} = this.state
    const temp = array.filter(item=>item.id != id)
    this.setState({
      array:temp
    })
  }

  /**
   * 修改商品的数量
   * @param {*} value 
   * @param {*} id 
   * @returns 
   */
  changeShopProductNumber = (value,id)=>{
      // debugger;
      const {array} = this.state
      const product = array.find(item=>item.id==id)
      if(value == -1){
        if(product.num <= 1){
          alert("商品数量最少为1")
          return;
        }
      }else{
        if(product.num >= 5){
          alert("商品限购5件")
          return;
        }
      }
      product.num += value
      this.setState({
        array
      })
  }
  /**
   * 修改每个商品选中状态
   */
  changeCheckStatus = (bool,id)=>{
    const {array} = this.state
    const product = array.find(item=>item.id == id)
    product.checked = bool
    this.setState({
      array
    })
  }
  render() {
    const {lists,array} = this.state
    return (
      <div className={styles.shopContainer}>
        <h2>产品列表</h2>
        <ItemList lists={lists} addShopCar={this.addShopCar}></ItemList>
        <h2>购物车列表</h2>
        <ShopCar array={array} deleteShopCar={this.deleteShopCar} changeShopProductNumber={this.changeShopProductNumber} changeCheckStatus={this.changeCheckStatus}></ShopCar>
      </div>
    )
  }
}
